<template>
  <div class="selectgood">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1000px" :close-on-click-modal="false" @close="close">
      <div class="flex-bet flex-y-top selected">
        <div class="flex-g-0 leftType">
          <el-scrollbar>
            <div class="leftborder" style="max-height: 600px;">
              <p class="curs pad_l_10 lh40" :class="{ 'current': index==current}" v-for="(item,index) in categoryList" :key="index" @click="clickCategory(index,item)">{{item.name}}</p>
            </div>
          </el-scrollbar>
        </div>
        <div class="flex-g-1">
          <div class="search mar_b20 mar_l10">
            <div class="filter_wrapper_edit flex">
              <div class="flex">
                <el-input v-model="goodName" placeholder="请输入商品名称" class="elinput"></el-input>
              </div>
              <el-button type="primary" size="medium" @click="search()" class="mar_l20">搜索</el-button>
            </div>
          </div>
          <div>
            <el-scrollbar>
              <div class="wid flex flex-wrap" style="max-height: 600px;">
                <div class="goods flex-bet" v-for="(item,index) in goodList" :key="index">
                  <div class="flex-g-0">
                    <el-image style="width: 90px;height: 80px;border-radius: 10px;" :src="item.icon" fit="cover"></el-image>
                  </div>
                  <div class="pad_l_10 flex-g-1">
                    <div class="fon_12 color_6">{{item.name}}</div>
                    <el-tag class="mar_t10" size="mini" type="success" effect="dark" v-if="item.goodsType == 1">外卖</el-tag>
                    <el-tag class="mar_t10" size="mini" type effect="dark" v-if="item.goodsType == 2">店内</el-tag>
                    <div class="flex-bet mar_t10">
                      <div class="color_f6c">库存：{{item.stock}}</div>
                      <div>
                        <el-button size="mini" round @click="open(item,index)" v-if="item.type==1">选取</el-button>
                        <el-button size="mini" round @click="open(item,index)" type="primary" v-else>取消</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div style="margin-left: 190px;">
        <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectGoods, selectGoodsType } from '@/api/plug';
import {mapState} from "vuex";

export default {
  name: 'labelSave',
  created() {},
  computed: {
    ...mapState(['storeData'])
  },
  data() {
    return {
      title: '',
      goodName: '',
      dialogFormVisible: false,
      yhtableData: [],
      selection: '选取',
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      tableData3: [],
      tableData4: [],
      ids: [],
      category: '',
      categoryList: [],
      goodList: [],
      current: 0,
      storeId: '',
      isSpecs: '',
      goodsType: '',
      startTime: '',
      endTime: '',
      goodsInfo: '',
      danxuan: '',
    };
  },
  components: {},
  methods: {
    async goodType(item) {
      const { data } = await selectGoodsType({ item ,storeId: this.storeId,goodsInfo: this.goodsInfo,});
      this.categoryList = data ? data : [];
      this.categoryList.unshift({ id: '', name: '全部' });
    },
    clickCategory(index, item) {
      this.current = index;
      this.category = item.id;
      this.init();
    },
    async init() {
      // console.log(this.ids)
      const { data, count } = await selectGoods({
        startTime: this.startTime,
        endTime: this.endTime,
        goodsType: this.goodsType,
        page: this.page.currentPage,
        keyword: this.goodName,
        idArr: this.ids,
        typeId: this.category,
        isSpecs: this.isSpecs,
        goodsInfo: this.goodsInfo,
        storeId: this.storeId,
        goodsModel: this.storeData.goodsModel});
      this.goodList = data ? data : [];
      // this.yhtableData = data
      this.page.total = count;
    },
    setStoreId(storeId) {
      this.storeId = storeId;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
    search() {
      this.init();
    },
    async showEdit(row, parm, time, item) {
      this.goodsType = parm || '';
      if (time) {
        this.startTime = this.$moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
        this.endTime = this.$moment(new Date(time[1])).format('YYYY-MM-DD HH:mm:ss');
      }
      console.log(this.startTime);
      console.log(this.endTime);
      this.goodType(item);
      if (!row) {
        this.title = '添加商品';
      } else {
        this.title = '编辑商品';
        this.ids = row;
        this.init();
      }
      this.dialogFormVisible = true;
    },
    isSpec(isSpec) {
      this.isSpecs = isSpec;
    },
    isGoodsInfo(goodsInfo) {
      this.goodsInfo = goodsInfo;
    },
    isDanXuan(danxuan) {
      this.danxuan = danxuan;
    },
    open(row, index) {
      if (row.type == 1) {
        this.goodList[index].type = 2;
        let yhObj = {
          name: row.name,
          stock: row.stock,
          price: row.price,
          icon: row.icon,
          id: row.id,
          type: row.type
        };
        if(this.goodsInfo=='1'){
          this.$set(this.tableData3, this.tableData3.length, yhObj);
        }else if(this.goodsInfo=='2'){
          this.$set(this.tableData4, this.tableData4.length, yhObj);
        }else{
          this.$set(this.tableData3, this.tableData3.length, yhObj);
        }
        // this.$emit('fetchData',this.tableData3)
      } else {
        this.goodList[index].type = 1;
      }
      if(this.danxuan=='1'){
        this.dialogFormVisible = false;
        this.save()
      }
    },
    //选取商家
    // open2(row,index){
    //     console.log('选取',row,index,this.yhtableData[index])
    //     if(row.edit=='选取' && !this.id){
    //         console.log('新增的时候选取')
    //         this.yhtableData[index].edit='取消'
    //         let yhObj = {
    //             name:row.name,
    //             id:row.id,
    //         }
    //         this.$set(this.tableData3, this.tableData3.length, yhObj)
    //     }
    //     else if(row.edit=='选取' && this.id>0){
    //         console.log('编辑的时候选取')
    //         this.yhtableData[index].edit='已选'
    //         let yhObj = {
    //             name:row.name,
    //             id:row.id,
    //         }
    //         this.$set(this.tableData3, this.tableData3.length, yhObj)
    //         console.log('修改后的数据',this.tableData3)
    //     }
    //     else if(row.edit=='已选'){this.yhtableData[index].edit='已选'}
    //     else{
    //         this.yhtableData[index].edit='选取'
    //         this.$delete(this.tableData3, index)
    //     }
    // },
    close() {
      // this.$refs["form"].resetFields();
      // this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    async save() {
      // this.$refs["form"].validate(async (valid) => {
      //     if (valid) {
      //         this.$delete(this.form,'data')
      //         const {msg} = await postSavePrint(this.form);
      //         this.$baseMessage(msg, "success");
      //         this.$emit("fetchData");
      //         this.close();
      //     } else {
      //         return false;
      //     }
      // });
      if(this.goodsInfo=='1'){
        this.$emit('fetchData', this.tableData3);
      }else if(this.goodsInfo=='2'){
        this.$emit('fetchData2', this.tableData4);
      }else{
        this.$emit('fetchData', this.tableData3);
      }

      this.close();
    }
  }
};
</script>
<style lang="scss">
.selectgood {
  .el-input-number {
    width: auto;
  }
  .el-dialog__header {
    border-bottom: 1px solid #eee;
  }
  .el-dialog__footer {
    border-top: 1px solid #eee;
  }
  .leftType {
    width: 180px;
  }
  .leftborder {
    height: 600px;
    margin-right: 20px;
    border-right: 1px solid #eee;
  }
  .current {
    color: #fff;
    background: #2a75ed;
  }
  .color_f6c {
    color: #f56c6c;
  }
  .goods {
    width: 47%;
    border: 1px solid #d8d1d1;
    margin: 0 10px 10px 10px;
    padding: 8px 10px;
    border-radius: 3px;
  }
}
</style>
